import { useEffect, useState } from 'react'
import { Image, Ellipsis, NavBar, Skeleton, Footer, Dialog, Input, Switch } from 'antd-mobile'
import styles from "./index.module.less"
import HeaderNav from "@/components/header-nav"
import FooterNav from "@/components/footer-nav"
import { useSearchParams, useParams } from 'react-router-dom'
import { DeleteOutline, EditSOutline, TravelOutline } from 'antd-mobile-icons'
import { showErrorToast, showSuccessToast } from '@/utils/customToast';
const { getWorldBookDetails, importWorldBook, getCardDetails, publishWorldRole } = $globalServicer('world')
import { WORLD_FIELDS, NPC_FIELDS, DESCRIPTION_FIELDS } from '@/utils/constant'
const ItemCrad = (props) => {
  const [params] = useSearchParams();
  const id = params.get('id');
  const customNavigate = $globalNavigate()
  const [worldInfo, setWorldInfo] = useState(null)
  useEffect(() => {
    getCardDetails(id).then(res => {
      setWorldInfo(res)
    });
  }, [])
  const handlePush = (id) => {
    let inputValue = ''; // 用于存储输入值
    let checked = false; // 用于存储开关状态
    Dialog.confirm({
      content: (
        <div>
          <p>请输入推荐理由：</p>
          <Input
            placeholder="请输入推荐理由（最多50字）"
            maxLength={50}
            onChange={(val) => {
              inputValue = val; // 保存输入的值
            }}
            style={{
              '--font-size': '14px',
              marginTop: '8px',
            }}
          />
          <p style={{marginTop: '20px'}}>是否设为私密：<Switch onChange={check => {checked = check}}/></p>
        </div>
      ),
      cancelText:
        <div className={styles.cancelClass}>
          取消
        </div>,
      confirmText: <div className={styles.confirmClass}>确认</div>,
      onConfirm: async () => {
        publishWorldRole({ id, push_reason: inputValue, publish_type: checked ? 2 : 1 }).then(res => {
          showSuccessToast('推送成功');
        }).catch(err => {
          showErrorToast('推送失败');
        })
      },
    })
  }
  return (
    <>
      <div className={styles.detail_warp}>
        <div className="header">
          <HeaderNav backArrow={true} title={worldInfo?.name}></HeaderNav>
        </div>
        <div className={styles.headerTop}
          style={{ backgroundImage: `url(${worldInfo?.cover})`, backgroundSize: 'cover' }}
        >
          <div className={styles.topImg}>
            <div className={styles.bottomOperate}>
              <div className={styles.toDetails} onClick={(e) => {
                e.stopPropagation()
                if (worldInfo.type === 1) {
                  customNavigate(`/world/createRoleAndWorld?id=${id}&type=copy`)
                } else if (worldInfo.type === 2) {
                  customNavigate(`/world/createMixRoleWorld?id=${id}&type=copy`)
                } else if (worldInfo.type === 3) {
                  customNavigate(`/world/createPremiumCard?id=${id}&type=copy`)
                }
              }}>
                复制编辑
              </div>
              <span className={styles.space}> &nbsp; </span>
              <div className={styles.toDetails} onClick={(e) => {
                e.stopPropagation()
                if (worldInfo.type === 1) {
                  customNavigate(`/world/createRoleAndWorld?id=${id}&type=edit`)
                } else if (worldInfo.type === 2) {
                  customNavigate(`/world/createMixRoleWorld?id=${id}&type=edit`)
                } else if (worldInfo.type === 3) {
                  customNavigate(`/world/createPremiumCard?id=${id}&type=edit`)
                }
              }}>
                编辑修改
              </div>
              <span className={styles.space}> &nbsp; </span>
              <div className={styles.toDetails} onClick={(e) => {
                e.stopPropagation()
                customNavigate(`/publishCard?id=${id}`)
              }}>
                分享发布
              </div>
            </div>
          </div>
        </div>
        <div className={styles.descWrapper}>
          <div className={styles.name}>
            {worldInfo?.name}
          </div>
          <div className={styles.desc}>
            {/* DESCRIPTION_FIELDS  // 这个是描述的 type: 1
              WORLD_FIELDS // 这个是世界的 type: 2 */}
            {
              worldInfo?.description && Object.entries(worldInfo.type === 1 ? DESCRIPTION_FIELDS : WORLD_FIELDS)
                .filter(([key]) => {
                  const value = worldInfo.description[key];
                  // 过滤掉 undefined、null、空字符串
                  return value !== undefined && value !== null && value !== '';
                })
                .map(([key, value]) => (
                  <div key={key} className={styles.descItem}>
                    <span>&nbsp;*&nbsp;</span>
                    <span>{value}</span>&nbsp;:&nbsp;
                    <span>{worldInfo.description[key]}</span>
                  </div>
                ))
            }
            {
              worldInfo?.type === 3 && (
                <div className={styles.descItem}>
                  <span>{worldInfo.description?.advanced_description}</span>
                </div>
              )
            }
          </div>
          <div className={styles.classifyListWrapper}>
            {worldInfo?.type === 2 && <>
              <p className={styles.classifyTitle}>
                世界主要角色
              </p>
              <div className={styles.personList}>
                {
                  worldInfo?.npcs?.map((item, index) =>
                    <div className={styles.roleItem} key={item.id}>
                      <div className={styles.itemTop}>
                        <img src={item.cover} alt="" />
                        <span className={styles.itemName}>{item.name}</span>
                      </div>
                      <div className={styles.itemBottom}>
                        {
                          item?.description && Object.entries(NPC_FIELDS)
                            .filter(([key]) => {
                              const value = item.description[key];
                              // 过滤掉 undefined、null、空字符串
                              return value !== undefined && value !== null && value !== '';
                            })
                            .map(([key, value]) => (
                              <div key={key} className={styles.descItem}>
                                <span>&nbsp;*&nbsp;</span>
                                <span>{value}</span>&nbsp;:&nbsp;
                                <span>{item.description[key]}</span>
                              </div>
                            ))
                        }
                      </div>
                    </div>
                  )
                }
              </div>
            </>
            }
          </div>
        </div>
      </div>
      <div className="footer">
        <FooterNav></FooterNav>
      </div>
    </>
  );
};

export default ItemCrad;
